<template>
    <div id="app">
        <page-header v-show="!is_admin" :toggle_if_show_calc="toggle_if_show_calc"/>
        <router-view @switchAdmin="switchAdmin" :is_admin="is_admin"/>
        <Calc :if_show_calc="if_show_calc" v-show="if_show_calc && !is_admin" :toggle_if_show_calc="toggle_if_show_calc"></Calc>
        <page-footer v-show="!is_admin"/>
    </div>
</template>

<script>
import PageHeader from '@/components/Header.vue'
import PageFooter from '@/components/Footer.vue'
import Calc from '@/components/Calc.vue'

export default {
  name: 'App',
  components: {
    PageHeader,
    PageFooter,
    Calc
  },
  data () {
    return {
      if_show_calc: false,
      is_admin: false
    }
  },
  methods: {
    toggle_if_show_calc () {
      this.if_show_calc = !this.if_show_calc
    },
    switchAdmin (arg) {
      // console.log(this.$root.$store.state);
      this.is_admin = arg
    }
  }
}
</script>

<style>
    body {
        font-family: "Microsoft YaHei" !important;
    }

    .dropdown-menu {
        background-color: #fff !important;
    }

    .dropdown-menu a {
        color: #ff5900 !important;
    }

    .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
        color: #fff;
        background-color: #f44336 !important;
    }

    .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {
        color: #fff;
        background-color: #f44336 !important;
    }

    .navbar-inverse .navbar-nav > li > a {
        color: white !important;
    }

    .mb-2 {
        margin-bottom: 10px !important;
    }

    .mb-3 {
        margin-bottom: 15px !important;
    }
</style>
